<template>
    <div class="page-container">
        <div class="top-container">
            <div class="content-box">
                <div class="top-content">
                    <div class="content-title1">在职人员总数</div>
                    <div class="content-value1">{{ data.incumbencyCount }}</div>
                </div>
            </div>
            <div class="content-box">
                <div class="top-content">
                    <div class="content-title1">当年离职人数</div>
                    <div class="content-value1">{{ data.resignCount }}</div>
                </div>
            </div>
            <div class="content-box">
                <div class="top-content">
                    <div class="content-title1">职称人员总数</div>
                    <div class="content-value1">{{ data.professionalCount }}</div>
                </div>
            </div>
        </div>
        <div class="secondary-container">
            <div class="content-box">
                <div id="userChart1" class="pie-class"></div>
            </div>
            <div class="content-box">
                <div id="userChart2" class="pie-class"></div>
            </div>
            <div class="content-box">
                <div id="userChart3" class="pie-class"></div>
            </div>
        </div>
        <div class="secondary-container">
            <div class="content-box">
                <div id="userChart6" class="pie-class"></div>
            </div>
            <div class="content-box">
                <div id="userChart7" class="pie-class"></div>
            </div>
            <div class="content-box"></div>
        </div>
        <div class="third-container">
            <div class="full-content-box">
                <div id="userChart4" class="bar-class"></div>
            </div>
        </div>
        <div class="forth-container">
            <div class="full-content-box">
                <div id="userChart5" class="bar-class"></div>
            </div>
        </div>
    </div>
</template>
<script>
import { ref, toRefs, reactive, onMounted } from 'vue'
import { ElNotification } from 'element-plus'
import { useRouter, useRoute } from 'vue-router'
import http from '@/http.js'
import formatUtil from '@/utils/format.js'
import * as echarts from 'echarts'

export default {
    name: 'UserAnalysis',
    components: {},
    setup() {
        const state = reactive({
            data: {
                incumbencyCount: 0,
                resignCount: 0,
                professionalCount: 0,
                kind: [],
                professional: [],
                post: [],
                userAge: [],
                workAge: [],
                entryAge: []
            }
        })

        const loadData = () => {
            http.fetchForm({
                url: '/analysis/user/queryUserAnalysis',
                method: 'get',
                data: {}
            }).then((res) => {
                let data = res.data
                console.log(data)
                state.data = data

                let color1 = ['#0984e3', '#00cec9', '#e15f41', '#f19066']
                let color2 = ['#ff7675', '#fdcb6e', '#e17055', '#00b894']
                let color3 = ['#a55eea', '#45aaf2', '#0fb9b1', '#f7b731']
                loadPieChart('年龄分布', 'userChart1', data.userAge, color1)
                loadPieChart('工龄分布', 'userChart2', data.workAge, color2)
                loadPieChart('入职年限分布', 'userChart3', data.entryAge, color3)

                loadPie2Chart('人员类别统计', 'userChart6', data.kind, color3)
                loadPie2Chart('职称类别统计', 'userChart7', data.professional, color3)

                let cert = [
                    {
                        label: '注册岩土工程师',
                        value: 2
                    },
                    {
                        label: '注册测绘师',
                        value: 4
                    },
                    {
                        label: '检师（道路工程）',
                        value: 23
                    },
                    {
                        label: '检师（桥梁隧道工程）',
                        value: 1
                    },
                    {
                        label: '检师（水运材料）',
                        value: 1
                    },
                    {
                        label: '检师（公路材料）',
                        value: 1
                    },
                    {
                        label: '检员（水运材料）',
                        value: 7
                    },
                    {
                        label: '检员（公路材料）',
                        value: 1
                    },
                    {
                        label: '检员（隧道）',
                        value: 1
                    },
                    {
                        label: '测量员证',
                        value: 91
                    },
                    {
                        label: '城轨质量安全',
                        value: 19
                    },
                    {
                        label: '管线培训证书',
                        value: 9
                    },
                    {
                        label: '涉密测绘成果岗位培训证',
                        value: 2
                    },
                    {
                        label: '市政排水管道有限空间作业安全培训证书',
                        value: 4
                    }
                ]

                loadBarChart('岗位统计', 'userChart4', data.post, '#f7b731')
                loadBarChart('持证人数分类统计', 'userChart5', data.cert, '#0fb9b1')
            })
        }

        const loadPieChart = (title, chartId, data, color) => {
            const chart = echarts.init(document.getElementById(chartId))
            let option = {
                title: {
                    text: title,
                    left: '15',
                    top: '15',
                    textStyle: {
                        fontSize: 14,
                        fontFamily: 'Microsoft YaHei',
                        fontWeight: 'lighter'
                    }
                },
                tooltip: {
                    trigger: 'item'
                },
                color: color,
                legend: {
                    top: '5%',
                    left: 'right',
                    orient: 'vertical',
                    textStyle: {
                        fontSize: 12,
                        fontFamily: 'Microsoft YaHei',
                        fontWeight: 'lighter'
                    }
                },
                series: [
                    {
                        name: '数量',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 10,
                            borderColor: '#fff',
                            borderWidth: 2
                        },
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '40',
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: data
                    }
                ]
            }
            chart.setOption(option)
        }

        const loadPie2Chart = (title, chartId, data, color) => {
            const chart = echarts.init(document.getElementById(chartId))
            let option = {
                title: {
                    text: title,
                    left: '15',
                    top: '15',
                    textStyle: {
                        fontSize: 14,
                        fontFamily: 'Microsoft YaHei',
                        fontWeight: 'lighter'
                    }
                },
                tooltip: {
                    trigger: 'item'
                },
                color: color,
                legend: {
                    top: '5%',
                    left: 'right',
                    orient: 'vertical',
                    textStyle: {
                        fontSize: 12,
                        fontFamily: 'Microsoft YaHei',
                        fontWeight: 'lighter'
                    }
                },
                series: [
                    {
                        name: '数量',
                        type: 'pie',
                        radius: '70%',
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 10,
                            borderColor: '#fff',
                            borderWidth: 2
                        },
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '40',
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: data
                    }
                ]
            }
            chart.setOption(option)
        }

        const loadBarChart = (title, chartId, data, color) => {
            const chart = echarts.init(document.getElementById(chartId))
            let labels = []
            let values = []
            data.forEach((item) => {
                labels.push(item.label)
                values.push(item.value)
            })
            let option = {
                title: {
                    text: title,
                    left: '15',
                    top: '15',
                    textStyle: {
                        fontSize: 14,
                        fontFamily: 'Microsoft YaHei',
                        fontWeight: 'lighter'
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: labels,
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '数量',
                        type: 'bar',
                        barWidth: '40',
                        data: values,
                        itemStyle: {
                            color: color
                        }
                    }
                ]
            }
            chart.setOption(option)
        }

        // mounted
        onMounted(() => {
            loadData()
        })

        return {
            ...toRefs(state)
        }
    }
}
</script>
<style scoped>
.page-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: scroll;
    overflow-x: hidden;
    padding: 10px;
    background: #f7f7f7;
}

.top-container {
    width: 100%;
    display: flex;
}

.content-box {
    width: 33.33%;
    padding: 5px;
}

.top-content {
    width: 100%;
    padding: 15px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.content-title1 {
    font-size: 16px;
    color: #657180;
    font-weight: lighter;
}

.content-value1 {
    color: #464c5b;
    font-size: 24px;
    font-weight: bold;
    padding-top: 20px;
}

.secondary-container {
    width: 100%;
    display: flex;
}

.pie-class {
    width: 100%;
    height: 200px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    padding-right: 10px;
}

.full-content-box {
    padding: 5px;
}

.bar-class {
    width: 100%;
    height: 250px;
    padding-bottom: 20px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
</style>
